<!DOCTYPE html>
<html class="x-admin-sm">
<!-- 保购详情 -->

<head>
    <meta charset="UTF-8">
    <title>保购详情页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <!-- <link href="css/newStyle.css" rel="stylesheet"> -->
    <!-- 弹窗轻提示 -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <!-- 引入jq -->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <!-- <script type="text/javascript" src="./js/domain.js"></script> -->

    <style>
        .none {
            display: none;
        }

        .fl {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 筛选模块 */

        .searchPart {
            border: 1px solid #ccc;
            margin: 15px 15px 5px 15px;
            background-color: #fff;
        }

        .layui-form-item {
            margin-bottom: 3px;
        }

        /* 表格部分 */

        .FormTablePart,
        .TotalTablePart,
        .FanTablePart {
            margin: 15px 15px;
        }

        .FormTablePart {
            border: 1px solid #ddd;
            height: 23vh;
            text-align: center;
        }

        .userImg .layui-icon {
            font-size: 70px;
            color: #ccc;
        }

        .userNum {
            font-size: 16px;
            margin: 15px 0;
        }

        .userText {
            width: 100px;
            height: 25px;
            line-height: 25px;
            background: #f04844;
            border-radius: 10px;
            margin: 0 auto;
            color: #fff;
        }

        .FormTablePartLf {
            padding-top: 20px;
            flex: 3;
        }

        .FormTablePartRg {
            flex: 7;
            height: 100%;
            margin-top: 20px;
        }

        .layui-table-view .layui-table {
            width: 100%;
            height: 100%;
        }


        .totalTitle,
        .fanTitle {
            font-size: 16px;
            color: #666;
        }

        .FormTablePart {
            height: 250px;
        }

        .layui-form-label {
            width: 120px !important;
        }

        .layui-input {
            width: 200px !important;
        }

        .layui-table th {
            font-weight: bold;
            font-size: 20px;
        }

        .layui-laypage-skip>.layui-input {
            width: 40px !important;
        }

        .layui-laypage-default {
            margin-left: 350px !important;
        }

        .goods_name {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background-color: #1abc9c;
            text-align: center;
        }

        /* .layui-layer-btn0 {
            position: absolute !important; 
            top: 20 !important;
            right: 0;
            background-color: red !important;
        } */
        .user_star {
            text-align: center;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: #f04844;
            width: 80px;
            border-radius: 15px;
            margin-left: 135px;
            margin-top: 5px;
        }

        .look_detail {
            color: #027db4;
            font-size: 12px;
            position: relative;
            top: 9px;
            left: -65px;
            cursor: pointer;
            text-decoration: underline;
        }

        .wating_big_div {
            position: fixed;
            top: 0px;
            width: 100%;
            height: 100%;
            display: table;
            z-index: 9999;
        }

        .zhezhao {
            opacity: 0.3;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
        }

        .wating_content_div {
            text-align: center;
            background: none;
            display: table-cell;
            vertical-align: middle;
        }

        .loadingBox {
            width: 150px;
            height: 160px;
            margin: 0 auto;
            background: #535353;
            border-radius: 8px;
        }

        .m-load2 {
            width: 36px;
            height: 36px;
            top: 40px;
            margin: 0px auto;
            transform: scale(1.3, 1.3);
        }

        .loading_text_box {
            color: #fff !important;
            margin-top: 75px !important;
        }

        .m-load2 {
            position: relative;
        }

        .m-load2 .line div {
            position: absolute;
            left: 16px;
            top: 0;
            width: 3px;
            height: 36px;
        }

        .m-load2 .line div:before,
        .m-load2 .line div:after {
            content: '';
            display: block;
            height: 50%;
            background: #fcfcfc;
            border-radius: 5px;
        }

        .m-load2 .line div:nth-child(2) {
            -webkit-transform: rotate(30deg);
        }

        .m-load2 .line div:nth-child(3) {
            -webkit-transform: rotate(60deg);
        }

        .m-load2 .line div:nth-child(4) {
            -webkit-transform: rotate(90deg);
        }

        .m-load2 .line div:nth-child(5) {
            -webkit-transform: rotate(120deg);
        }

        .m-load2 .line div:nth-child(6) {
            -webkit-transform: rotate(150deg);
        }

        .m-load2 .circlebg {
            position: absolute;
            left: 49%;
            top: 50%;
            width: 18px;
            height: 18px;
            margin: -9px 0 0 -9px;
            background: #535353;
            border-radius: 18px;
        }

        /** 加载动画 **/
        @-webkit-keyframes load {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .m-load2 .line div:nth-child(1):before {
            -webkit-animation: load 1.2s linear 0s infinite;
        }

        .m-load2 .line div:nth-child(2):before {
            -webkit-animation: load 1.2s linear 0.1s infinite;
        }

        .m-load2 .line div:nth-child(3):before {
            -webkit-animation: load 1.2s linear 0.2s infinite;
        }

        .m-load2 .line div:nth-child(4):before {
            -webkit-animation: load 1.2s linear 0.3s infinite;
        }

        .m-load2 .line div:nth-child(5):before {
            -webkit-animation: load 1.2s linear 0.4s infinite;
        }

        .m-load2 .line div:nth-child(6):before {
            -webkit-animation: load 1.2s linear 0.5s infinite;
        }

        .m-load2 .line div:nth-child(1):after {
            -webkit-animation: load 1.2s linear 0.6s infinite;
        }

        .m-load2 .line div:nth-child(2):after {
            -webkit-animation: load 1.2s linear 0.7s infinite;
        }

        .m-load2 .line div:nth-child(3):after {
            -webkit-animation: load 1.2s linear 0.8s infinite;
        }

        .m-load2 .line div:nth-child(4):after {
            -webkit-animation: load 1.2s linear 0.9s infinite;
        }

        .m-load2 .line div:nth-child(5):after {
            -webkit-animation: load 1.2s linear 1s infinite;
        }

        .m-load2 .line div:nth-child(6):after {
            -webkit-animation: load 1.2s linear 1.1s infinite;
        }

        .star_fan table tbody tr {
            background-color: #eaf5fc;
        }

        .star_fan table tbody tr:hover {
            background-color: #d4e6f0;
        }
        table thead tr {
            background-color: #f2f2f2 !important;
        }
    </style>
</head>

<body>
    <!-- 导航条模块 -->
    <div class="x-nav" style="padding-top: 5px;  position: fixed; top: 0;width: 100%;">

        <a style="display: inline-block; " class="layui-btn layui-btn-small">
            <cite>保购详情</cite>
        </a>
        <a class="layui-btn " style="line-height:1.6em;margin-top:3px;float:right; position: relative; left: -30px;"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px">刷新</i>
        </a>

    </div>
    <!-- 导购员信息模块 -->
    <div class="FormTablePart fl" style="margin-top: 60px;">
        <div class="FormTablePartLf">
            <div class="userImg">
                <!-- <i class="layui-icon layui-icon-username" style="line-height:30px"></i> -->
                <img src="#" alt="" class="user_img"
                    style="width: 100; height: 100px; border-radius: 50px; margin-top: -15px ">
            </div>
            <div class="num_phone" style="margin-top: 5px;"> </div>
            <div class="user_star"> </div>
        </div>
        <div class="FormTablePartRg">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">保购账号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input account_phone" disabled=''>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" class="layui-input phone" disabled=''>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input nickname" disabled=''>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">个性签名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" class="layui-input personal_signature" disabled=''>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input sex" disabled=''>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证号码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" class="layui-input like_classify" disabled=''>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item fl">
                    <div class="layui-inline">
                        <label class="layui-form-label">会员注册</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input user_create_time" disabled=''>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">提交审核</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" class="layui-input create_time" disabled=''>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item fl">
                    <!-- <div class="layui-inline">
                        <label class="layui-form-label">最近提交审核</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input province_name">
                        </div>
                    </div> -->
                    <div class="layui-inline">
                        <label class="layui-form-label">真实姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" class="layui-input salesName" disabled=''>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">支付宝账号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input alipay_account" disabled=''>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item fl">

                    <div class="layui-inline">
                        <label class="layui-form-label">用户来源</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" class="layui-input origin" disabled=''>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">保购升级</label>
                        <div class="layui-input-inline">
                            <!-- <input type="text" name="password" class="layui-input origin" disabled=''> -->
                            <p class="layui-input origin">
                                <span class="look_detail">查看详情</span>
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 统计信息模块 -->
    <div class="TotalTablePart">
        <div class="totalTitle">
            <!-- <i class="layui-icon layui-icon-search"></i> -->
            <img src="./images/goods_icon.png" alt="" style="position: relative; top: -2px;">
            统计信息
        </div>
        <table style="width: 100%; height: 55px; border: 1px solid #ccc; margin-top: 10px; border-collapse: collapse ;">
            <thead>
                <tr style="background-color: #eee;">
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600 ; color:#666;">保购星级</th>
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">粉丝</th>
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">总提成金额</th>
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">粉丝交易额</th>
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">粉丝交易订单量
                    </th>
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">发布量</th>
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">点击量</th>
                    <th style="padding:6px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">点赞量</th>
                </tr>
            </thead>
            <tbody>
                <tr style="text-align: center;">
                    <td id="star" style="border:1px solid #ccc ; color: #666; background-color: #eaf5fc;"></td>
                    <td id="star1" style="border:1px solid #ccc; color: #666; background-color: #eaf5fc;"></td>
                    <td id="star2" style="border:1px solid #ccc; color: #666; background-color: #eaf5fc;"></td>
                    <td id="star3" style="border:1px solid #ccc; color: #666; background-color: #eaf5fc;"></td>
                    <td id="star4" style="border:1px solid #ccc; color: #666; background-color: #eaf5fc;"></td>
                    <td id="star5" style="border:1px solid #ccc; color: #666; background-color: #eaf5fc;"></td>
                    <td id="star6" style="border:1px solid #ccc; color: #666; background-color: #eaf5fc;"></td>
                    <td id="star7" style="border:1px solid #ccc; color: #666; background-color: #eaf5fc;"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 粉丝交易记录模块 -->
    <div class="FanTablePart star_fan">
        <div class="fanTitle">
            <img src="./images/goods_icon.png" alt="" style="position: relative; top: -2px;">
            粉丝交易记录
        </div>
        <table id="demo" lay-filter="test" style="width: 100%;"></table>
    </div>
</body>


<!-- 导航员信息js -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
    });
</script>

<!-- 操作按钮 -->
<!-- 查看订单暂时没写 -->
<script type="text/html" id="btnS">

<a href="./guide_fanDetail.html?id={{d.id}}&order={{d.order_serial_number}}&status={{d.pay_status}}" style="color: #1abc9c;">查看订单</a>
</script>
<script type="text/html" id="imgS">
        <img src="images/bg.png" width="60px" height="60px" class="layui-upload-img" onclick="previewImg(this)">
    </script>
<script>

</script>
<script>
    // 获取页面跳转过来参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    var buyMid = getUrlParam("id"); //当前导购员id


    $('.look_detail').on('click', function () {
        // layer.msg('此模块暂时还未开发！')
        // return false;
        window.location.href = 'guide_upgrade.html?id=' + buyMid;
    })
    // console.log(buyMid, '查看id')
    // 导购员查看数据回写
    Showload();
    $.ajax({
        url: urls + 'sales/getSalesDetails',
        headers: {
            'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
        },
        type: 'post',
        data: { id: buyMid },
        success: function (res) {
            CheckLogout(res); //检查是否登陆过
            // console.log(res, '查看的数据回写')
            if (res.code == 0) {
                InitTime();
                $('.user_img').attr('src', imgUrl + res.data.head_url)
                $('.num_phone').text(res.data.account_phone)
                $('.user_star').text(res.data.sale)
                $('.account_phone').val(res.data.account_phone)
                $('.phone').val(res.data.phone)
                $('.nickname').val(res.data.nickname)
                $('.personal_signature').val(res.data.personal_signature)
                if (res.data.sex == 1) {
                    $('.sex').val('男')
                } else if (res.data.sex == 2) {
                    $('.sex').val('女')
                } else {
                    $('.sex').val('保密')
                }
                $('.like_classify').val(res.data.id_card_number)
                // $('.birthday').val(res.data.birthday)
                $('.user_create_time').val(res.data.user_create_time)

                $('.create_time').val(res.data.create_time)

                if (res.data.provinceName !== null && res.data.cityName !== null) {
                    $('.province_name').val(res.data.provinceName + res.data.cityName)
                }
                $('.salesName').val(res.data.salesName)
                $('.alipay_account').val(res.data.alipay_account)
                $('.origin').val(res.data.origin == 1 ? 'PC端' : 'APP端')
            } else {
                TipsAlert("请求数据失败,请联系后台技术人员");
            }
        }
    })


    //  获取导购星级粉丝数
    $.ajax({
        type: 'get',
        url: urls + 'sales/getSalesFansOrderById',
        headers: {
            'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
        },
        data: {
            id: buyMid
        },
        success: function (res) {
            CheckLogout(res); //检查是否登陆过
            //  console.log(res,'粉丝数量')
            if (res.code == 0) {
                $('#star').text(res.data.sale)
                $('#star1').text(res.data.fans_num)
                $('#star2').text() //分润金额
                $('#star3').text(res.data.orderSum)
                $('#star4').text(res.data.orderCount)
                $('#star5').text(res.data.opusCount)
                $('#star6').text()  //点击量
                $('#star7').text(res.data.thumb_up_num)
            } else {
                TipsAlert("请求数据失败,请联系后台技术人员");
            }
        }
    })

    layui.use('table',
        function () {
            var table = layui.table;
            //第一个实例  粉丝交易记录
            table.render({
                elem: '#demo',
                cellMinWidth: 80,
                methods: 'get',
                // height: 'full-250',
                url: urls + 'sales/getSalesOrderListById' //数据接口
                ,
                headers: {
                    'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                },
                where: { id: buyMid },
                page: true //开启分页
                , limit: 5
                , limits: ['5', '8', '10', '20']
                , parseData: function (res) { //res 即为原始返回的数据
                    //   console.log(res, '粉丝交易')
                    CheckLogout(res); //检查是否登陆过
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.records //解析数据列表
                    }
                }
                ,
                cols: [
                    [ //表头
                        {
                            field: 'order_serial_number',
                            title: '订单编号',
                            align: 'center',
                        }, {
                            field: 'create_time',
                            title: '提交时间',
                            align: 'center',
                        }, {
                            field: 'phone',
                            title: '用户账号',
                            align: 'center',
                        }, {
                            field: 'price',
                            title: '订单金额',
                            align: 'center',
                        }, {
                            field: 'pay_type',
                            title: '支付方式',
                            align: 'center',
                            templet: function (res) {
                                if (res.pay_type == 1) {
                                    return '支付宝支付';
                                } else if (res.pay_type == 2) {
                                    return '微信支付'
                                }
                            }
                        }, {
                            field: 'order_source',
                            title: '订单来源',
                            align: 'center',
                            templet: function (res) {
                                if (res.order_source == 1) {
                                    return 'APP订单';
                                } else if (res.order_source == 2) {
                                    return '其他订单'
                                }
                            }
                        }, {
                            field: 'pay_status',
                            title: '订单状态',
                            templet: function (res) {
                                if (res.pay_status == 0) {
                                    return '待支付'
                                } else if (res.pay_status == 1) {
                                    return '已支付'
                                } else if (res.pay_status == 2) {
                                    return '支付失败'
                                } else if (res.pay_status == 3) {
                                    return '订单取消'
                                } else if (res.pay_status == 4) {
                                    return '已删除'
                                }
                            },
                            align: 'center',
                        },
                        {
                            field: '',
                            width: 120,
                            templet: '#btnS',
                            title: '操作',
                            align: 'center'
                        }
                    ]
                ],
                done: function (res, curr, count) {
                    if (res.code == 0) {
                        InitTime();
                    } else {
                        TipsAlert("请求数据失败,请联系后台技术人员");
                    }
                }
            });
        });
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

<script>
    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {
                icon: 1,
                time: 1000
            });
        });
    }

    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [500 + 'px', 550 + 'px'], // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {
            }
        });
    }
</script>
</html>